<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="container">
		<!-- 约拍还是AIGC -->
		<view class="orderTypes">
			<view class="typeBox" v-for="(item,index) in orderType" :key="index" :class="typeIndex == index ? 'active':''" @click="changeType(index)">
				{{ item.title }}
				<span class="mores"></span>
			</view>
		</view>
		<!-- 约拍还是AIGC -->
		<!-- 状态筛选 -->
		<view class="scroll-icons">
			<scroll-view :scroll-x="true">
				<view class="scrollIconsBox" :style="'width:'+ (listBoxWidth * 28 + topStatus.length * 2 * 30) +'rpx'">
					<view v-for="(item,index) in topStatus" :class="orderStatusIndex == index ? 'active':''" :key="index" @click="toShowList(index,item.title)">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 状态筛选 -->
		<!-- 订单信息 -->
		<view class="aaaa" v-if="orderInfo.length !== 0">
			<scroll-view class="scroll-box" style="height: 85vh;" @scrolltolower="onScrollToLowerOrder" :scroll-y="true">
				<view class="order" v-for="item in orderInfo" :key="item.id">
					<view class="order-header" @click="toDetail(item.orderId , item.id , typeIndex)">
						<view class="left">
							{{item.address}}<uni-icons type="forward"></uni-icons>
						</view>
						<view class="right" v-if="item.status">
							<!-- :style="'color:' + getColor(item.status)" -->
							{{getText(item.status)}}
						</view>
					</view>
			
					<view class="ordercent">
						<view class="content" @click="toDetail(item.orderId , item.id , typeIndex)">
							<view class="left">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="order-info" v-for="(subItem,subIndex) in item.textInfo" :key="subIndex">
									<view class="text-left">
										{{ subItem.leftText }}
									</view>
									<view class="text-right">
										{{ subItem.rightText }}
									</view>
								</view>
								<!--<view class="fukuan">
									实付款￥{{ item.total }}
								</view> -->
							</view>
						</view>
			
						<view class="bottom">
							<view class="tags blue" @click="toChangeTags(item.orderId,1,'','')" v-if="typeIndex == 1 && item.status == 'composite_footage' && item.residueEditNumber >= 1">
								重新生成
							</view>
							<view class="tags blue" @click="toChangeTags(item.orderId,8,'','')" v-if="typeIndex == 1 && item.status == 'paid_balance_payment'">
								前往素材
							</view>
							<view class="tags org" @click="toChangeTags(item.orderId,9,item.moreservice,item.jobId)"  v-if="typeIndex == 0 && item.status == 'completed' && item.jobId || typeIndex == 1 &&  item.jobId">
								预览
							</view>
							<view class="tags blue" @click="toChangeTags(item.orderId,2,item.moreservice,item.jobId)"  v-if="typeIndex == 0 && item.status == 'completed' && item.jobId || typeIndex == 1 &&  item.jobId">
								下载
							</view>
							<view class="tags red" @click="toChangeTags(item.orderId,3,'','')"  v-if="typeIndex == 1 && item.status == 'Service_completion'">
								支付尾款
							</view>
							<view class="tags org" @click="toChangeTags(item.orderId,4,'','')"  v-if="item.status == 'completed'">
								评价
							</view>
							<view class="tags green" @click="toChangeTags(item.orderId,5,'','')"  v-if="typeIndex == 1">
								咨询
							</view>
							<view class="tags glay" @click="toChangeTags(item.orderId,6,'','')"  v-if="item.status !== 'paid_balance_payment'&& item.status !== 'paid' && item.status !== 'paid_deposit' && item.residueEditNumber <= 0">
								删除
							</view>
							<view class="tags red" @click="toChangeTags(item,7,'','')"  v-if="getRefunds(item.status,item.textInfo[2].rightText,item.haveUpload)">
								申请退款
							</view>
						</view>
					</view>
				</view>
				<view class="srcoll-bottom" v-if="orderInfo.length < orderTotal">
					<p v-if="orderEnd">加载中...</p>
					<p v-else>没有更多了~</p>
				</view>
			</scroll-view>
		</view>
		
		<!-- 暂无数据 -->
		<view v-show="orderInfo.length === 0" style="margin-top: 50%; text-align: center; line-height: 100%;">
			<view class="nodatas">
				<image :src="imageUrl + 'nodata/nodata1.png'" mode="aspectFit"></image>
				<!-- i标签里是蓝色文字，可以加入跳转等功能来制作交互~ -->
				<view class="text">暂时没有 <i> {{ topStatus[orderStatusIndex].name }} </i> 订单哦！</view>
			</view>
		</view>
		<!-- 订单信息结束 -->

		<!-- 弹窗 -->
		<uni-popup ref="DownLoads" type="center">
			<view class="toContants">
				<b>下载</b>
				<p>请确认下载成片还是原素材？</p>
				<span>
					<button @click="toDownLoad('ok')">下载成片</button>
					<button :style="itemStatus == true?'':'background:#dddddd;'" :disabled="itemStatus == true" @click="toDownLoad('all')">下载源素材</button>
				</span>
			</view>
		</uni-popup>
		<uni-popup ref="toContant" type="center">
			<view class="toContants">
				<b>联系我们</b>
				<p>您将跳转到客服聊天框。</p>
				<span>
					<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom">确认</button>
					<button @click="toCh()">取消</button>
				</span>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="popup" type="bottom" :animation="true" :maskClick="true">
			<view class="popopStyle">
				<button class="flaking">下载成片</button>
				<button class="source">下载源素材</button>
			</view>
		</uni-popup> -->
		<!-- 弹出提示消息 -->
		<uni-popup ref="messageContent" type="message">
			<uni-popup-message :type="message.msgType" :message="message.messageText"
				:duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="toCommon" type="center">
			<view class="toCommons">
				<b>订单评价</b>
				<view class="commonLists">
					<view>
						<span>价格质量：</span>
						<uni-rate v-if="commonOpen==true" v-model="commonParams.assessTypeDto.pieceQuality"/>
					</view>
					<view>
						<span>成片质量：</span>
						<uni-rate v-if="commonOpen==true" v-model="commonParams.assessTypeDto.shotQuality"/>
					</view>
					<view>
						<span>购买过程：</span>
						<uni-rate v-if="commonOpen==true" v-model="commonParams.assessTypeDto.buyProcess"/>
					</view>
					<view class="texts">
						<!-- <span>评价内容：</span> -->
						<textarea v-model="commonParams.memberDescribe" maxlength="200" @input="getDesecs" placeholder="请输入评价"></textarea>
						<view class="maxlengths">
							<text>{{desecs}}/200</text>
						</view>
					</view>
				</view>
				<view class="bottomCommons">
					<button type="primary" @click="AddCommon()">提交评价</button>
					<!-- <button type="warn" @click="clearCommon()">取消</button> -->
				</view>
			</view>
		</uni-popup>
		<!-- 弹窗 -->
		<uni-popup ref="tuihuanBtn" type="center">
			<view class="toContants">
				<b>退款申请</b>
				<view class="areaInput">
					<uni-forms-item name="introduction">
						<uni-easyinput type="textarea" v-model="introduction" placeholder="退款原因描述，有助于更好的处理售后问题" />
					</uni-forms-item>
				</view>
				<span>
					<button @click="sureRefund">确认提交</button>
					<button  @click="toCh()">取消</button>
				</span>
			</view>
		</uni-popup>

		<!-- <view class="fodderNull" v-if="tuihuanBtn">
			<view class="fodderNullTips">
				<b>退款申请</b>
				<view class="areaInput">
					<uni-forms-item name="introduction">
						<uni-easyinput type="textarea" v-model="introduction" placeholder="退款原因描述，有助于更好的处理售后问题" />
					</uni-forms-item>
				</view>
				<span>
					<button @click="sureRefund">确认提交</button>
					<button  @click="toCh()">取消</button>
				</span>
			</view>
		</view> -->
	
		<!-- 视频播放弹窗  background-color="#ffffff" -->
		<uni-popup @maskClick="maskclick" ref="popupskiingVideo" class="skiingVideo-Box" @change="change">
			<view class="skiingVideo-list">
				<view class="title">
					<uni-icons type="closeempty" @click="toCh()"></uni-icons>
					<span>素材预览</span>
				</view>
				<video style="width: 100%;" v-if="indexVideo" :src="indexVideo">
					<view class="shuiyin">哇咔咔wakaka</view>
				</video>
			</view>
		</uni-popup>
	</view>
</template>


<script>
import {
		getEditingJob
	} from '@/api/service.js' // 媒资接口，用于调用视频相关数据
	import {
		getUserData
	} from '@/utils/storage.js' // 缓存内容，用于查找缓存里的东西
	import {
		payMentData,
	} from "@/api/payment.js"
	import {
		getYuepaiDetail,
		getShootList,
		getShootTC,
		deleteYuepais
	} from '@/api/yuepai.js' // 约拍订单接口，所有订单内的接口
	import {
		orderList,
		deleteOrders,
		orderComment,
		getOrderComment,
		getOrderDetail,
		refundPayment
	} from '@/api/order.js' // 订单接口，所有订单内的接口
	import imageConfig from '@/utils/images.js' // 图片地址储存位置
	import videoPlay from '@/pages/index/components/video-play/video-play.vue' // 预览视频
	export default {
		components: {
			videoPlay
		},
		data() {
			return {
				imageUrl: imageConfig.uploadImageUrl, // 这是图片地址前缀
				noImage:this.imageUrl + 'noPic.jpg', // 图片为空时调用
				// 顶部分类
				orderType:[
					{title:'AIGC'},
					{title:'约拍'}
				],
				typeIndex:0, // 控制顶部按钮切换
				orderStatusIndex:0, // 控制订单状态切换
				// 普通订单的状态
				orderStatus: [
					{name: '全部',title: '',color: ''},
					{name: '已取消',title: 'canceled',color: '#aaaaaa'},
					{name: '已付款',title: 'paid',color: '#00ff00'},
					{name: '已完成',title: 'completed',color: '#A7CCEF'},
					{name: '拒绝退款',title: 'refuseRefund',color: '#ff0000'},
					{name: '同意退款',title: 'agreeRefund',color: '#ff6600'},
					{name: '退款申请中',title: 'applyRefund',color: '#ddaaEF'},
				],
				// 约拍订单的状态
				yuepaiStatus: [
					{name: '全部',title: '',color: ''},
					{name: '已取消',title: 'canceled',color: '#aaaaaa'},
					{name: '已支付定金',title: 'paid_deposit',color: '#4CA2EC'},
					{name: '确定约拍',title: 'confirm_photo',color: '#4CA2EC'},
					{name: '服务完成',title: 'Service_completion',color: '#A7CCEF'},
					{name: '已支付尾款',title: 'paid_balance_payment',color: '#4CA2EC'},
					{name: '已提交合成',title: 'composite_footage',color: '#4CA2EC'},
					{name: '已完成',title: 'completed',color: '#A7CCEF'},
				],
				topStatus:[], // 用于储存数组
				listBoxWidth:0, // 存入字数
				orderInfo: [], // 这是根据样式调整后存在的数组
				orderTotal: 0, // 订单总数
				orderEnd: false, // 订单获取完毕
				// 调用订单需要的数据
				params: {
					orderStatus: "", // 订单状态,为空时不传这个状态过去
					pageSize: 10,
					pageNum: 1,
					orderByColumn: "createTime",
					isAsc: "desc"
				},
				params2: {
					shootOrderStatus: "", // 订单状态,为空时不传这个状态过去
					pageSize: 10,
					pageNum: 1,
					orderByColumn: "createTime",
					isAsc: "desc"
				},
				
				// 评价一个订单所需要的数据
				commonParams:{
				  assessTypeDto: {
				    buyProcess: 1, // 步骤评分
				    pieceQuality: 1, // 性价比
				    shotQuality: 1, // 输出质量
				  },
				  memberDescribe:null, // 这是评价的内容，
				  memberFace: getUserData().face, // 用户的头像
				  memberId: getUserData().id, // 用户的ID
				  memberName: getUserData().nickName, // 用户的昵称
				  objectId: null, // 这是对象ID，在点击评价时传入
				  objectType: "AFTER_ORDER" // 这是写死的，只有成功后才有评价 如果约拍有改变再说
				},
				commonOpen:false, // 用于展示星星时去除掉首次不能点击的抖动
				downloadData:{
					Action: "GetEditingJob", // 接口搜索索引，不会更改
					userId: getUserData().id, // 用户的ID，不会更改
					jobId: null // 下载前再更改
				},
				itemsId:0,
				itemStatus:false,
				desecs:0, // 评价字数
				message: {
					msgType: 'success',
					messageText: '这是一条成功提示',
				},
				indexVideo:''
			}
		},
		onShow() {
			const types = uni.getStorageSync("status")
			this.params.pageNum = 1
			if(types){
				if(types.change == 'yuepai'){
					console.log('这是约拍')
					this.topStatus = this.yuepaiStatus
					this.params2.shootOrderStatus = types.type
					this.typeIndex = 1
					this.getYuepaiList()
					this.orderStatusIndex = this.topStatus.findIndex(function(item,index,arr){ return item.title == types.type})
					uni.removeStorageSync("status")
				}else{
					console.log('这是订单')
					this.typeIndex = 0
					this.params.orderStatus = types ? types.type : 0
					this.topStatus = this.orderStatus
					this.getOrderList()
					this.orderStatusIndex = this.topStatus.findIndex(function(item,index,arr){ return item.title == types.type})
					uni.removeStorageSync("status")
				}
			}else{
				this.typeIndex = 0
				this.params.orderStatus = ''
				this.topStatus = this.orderStatus
				this.getOrderList()
			}
			
			// 每次计算前删除所有宽度
			this.listBoxWidth = 0
			for(let i = 0 ; i < this.topStatus.length ; i++ ){
				const width = this.topStatus[i].name.split("")
				this.listBoxWidth = this.listBoxWidth + width.length
			}
			
			// console.log(uni.getStorageSync("status"))
			// this.getOrderList()
		},
		onLoad() {
		},
		methods: {
			// 退款功能的判断
			getRefunds(status,time,upload){
				// AIGC订单的判断
				if(this.typeIndex == 0){
					if(upload!== true){
						if(status == 'paid'){
							return true
						}else{
							return false
						}
					}else{
						return false
					}
				}else{
					if(upload!== true){
						// 约拍订单的判断
						if(status == 'paid_balance_payment' || status == 'paid_deposit'){
							return true
						}else{
							// 获取当前时间
							const times = new Date()
							// 获取订单时间
							const orderTime = new Date(time)
							// 状态为确定约拍但是时间小于订单时间，也就是进行约拍之前
							if(status == 'confirm_photo' && orderTime > times){
								return true
							}else{
								return false
							}
							// return false
						}
					}else{
						return false
					}
					
				}
				item.status == 'paid_balance_payment'||item.status == 'paid_balance_payment'
			},
			getText(status) {
				if(this.typeIndex == 0 ){
					const statusData = this.orderStatus.filter(i => i.title == status)
					return statusData[0].name
				}else{
					const statusData = this.yuepaiStatus.filter(i => i.title == status)
					return statusData[0].name
				}
				
			},
			getDesecs(e){
				this.desecs = e.detail.value.length
			},
			toDetail(id,ids,type){
				console.log(id,ids,type)
				// let detailId = id ? id : ids
				uni.navigateTo({
					url: "/pages/order/detail?order="+ id + '&type=' + type,
				})
			},
			// 调出弹窗的方法
			toChangeTags(id,num,status,jobId){
				this.downloadData.jobId = jobId
				if(num == 1){
					// 获取详情
					getYuepaiDetail(id).then(res =>{
						// 将约拍ID存进缓存
						uni.setStorageSync("yuepaiOrderId", {id:id})
						res.data.orderShootMaterialList.forEach(item =>{
							this.$set(item, 'coverUrl', item.mediaUrl)
						})
						// 重新生成
						uni.navigateTo({
							url:"/pages/order/components/order-goods?selectData="+ encodeURIComponent(JSON.stringify(res.data.orderShootMaterialList)) + "&type=yuepai"
						})	
					})
				}else if(num == 2){
					this.$refs.DownLoads.open()
					this.itemStatus = status
					this.itemsId = id
				}else if(num == 3){
					getYuepaiDetail(id).then(res =>{
						 let data = {
						 	out_trade_no: res.data.orderShoot.outTradeNo, //订单编号
						 	description: res.data.orderShoot.description, //订单描述
						 }
						 // 调用后台接口，获取生成商户订单参数
						 payMentData(data).then(resp => {
						 	console.log('resp----------: ', resp)
						 	// 获取支付信息成功后，使用官方 API 调起微信支付
						 	uni.requestPayment({
						 		timeStamp: resp.data.timeStamp,
						 		nonceStr: resp.data.nonceStr,
						 		package: resp.data.package,
						 		// signType: resp.data.signType,
						 		paySign: resp.data.paySign,
						 		signType: 'MD5',
						 		success(res) {
						 			console.log('success------: ', res)
						 			console.log('支付成功');
						 			uni.navigateTo({
						 				url:"/pages/fodder/index?type=yuepai"
						 			})
									 uni.setStorageSync("yuepaiOrderId", {id:id})
						 		},
						 		fail(err) {
						 			console.log('err------: ', err)
						 			console.log('支付失败');
						 		},
						 	})
						 })
					})
				}else if(num == 4){
					this.$refs.toCommon.open()
					this.commonOpen = true
					this.commonParams.objectId = id
				}else if(num == 5){
					// 联系客服
					this.$refs.toContant.open()
				}else if(num == 6){
					uni.showModal({
						title: '删除订单',
						content: '删除后不可恢复!',
						confirmText: '确定',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm&&this.typeIndex == 0 ) {
								deleteOrders(id).then(res => {
									this.message.messageText = res.msgType
									this.$refs.messageContent.open
									this.getOrderList()
								})
								// 用户点击了确定按钮，执行删除操作
							}else if(res.confirm&&this.typeIndex == 1){
								deleteYuepais(id).then(res => {
									this.message.messageText = res.msgType
									this.$refs.messageContent.open
									this.getYuepaiList()
								})
							}
						}
					})
				}else if(num == 7){
					this.$refs.tuihuanBtn.open()
					this.refundInfo = id
					console.log(this.refundInfo)
					// 这是跳转的，不知道为啥不用
					// uni.navigateTo({
					// 	url: './components/refund?id=' + id
					// })
				}else if(num == 8){
					// 跳转素材
					uni.navigateTo({
						url:"/pages/fodder/index?type=yuepai"
					})
						uni.setStorageSync("yuepaiOrderId", {id:id})
				}else if(num == 9){
					getEditingJob({
						Action: "GetEditingJob",
						userId: getUserData().id,
						jobId: jobId
					}).then(acc => {
						console.log(acc, '这是预览素材')
						this.indexVideo = acc.editingJob.mediaDownloadUrl
						this.$refs.popupskiingVideo.open("bottom")
					})
				}
			},
			// 点击蒙版关闭视频弹窗
			maskclick() {
				this.indexVideo = null
			},
			change(e) {
				this.show = e.show
			},
			toCh(){
				this.$refs.DownLoads.close()
				this.$refs.toContant.close()
				this.$refs.messageContent.close()
				this.$refs.popupskiingVideo.close()
				this.$refs.tuihuanBtn.close()
			},
			// 清除评价
			clearCommon(){
				this.$refs.toCommon.close()
				this.commonParams.assessTypeDto = {
					buyProcess: 1, // 步骤评分
					pieceQuality: 1, // 性价比
					shotQuality: 1, // 输出质量
				}
				this.commonParams.objectId = null
				this.commonParams.memberDescribe = null
			},
			// 确定评价
			AddCommon(){
				// 判断点击到了对象，并且成功输入了评价
				if(this.commonParams.objectId && this.commonParams.memberDescribe){
					// 判断是否有用户ID,以防因BUG进入本页面时出现错误操作
					if(this.commonParams.memberId){
						// 新增评价接口
						orderComment(this.commonParams).then(res =>{
							uni.showToast({title: res.msg,icon: 'success',mask: true})
							this.$refs.toCommon.close()
						})
					}else{
						uni.showToast({title: "用户不存在",icon: 'error',mask: true})
					}
				}else{
					uni.showToast({title: "请输入评价",icon: 'error',mask: true})
				}
			},
			// 点击下载成片
			downloadOrder(id,status) {
				
				// console.log(id)
			},
			// 弹出下载选项
			toDownLoad(type){
				// 只有测试，所以暂时无法直接判断，先写一样的数据
				if(type == 'ok'){
					// 这是成片
					// this.downloadData.jobId = '8e96541b5ffb4e2385a9566cacc4c5c9'
					this.downloadMeizi(this.downloadData.jobId)
				}else{
					// this.downloadData.jobId = '8e96541b5ffb4e2385a9566cacc4c5c9'
					// 这是原素材
					this.downloadMeizi(this.downloadData.jobId)
				}
			},
			// 确认提交退款
			sureRefund() {
				if(this.introduction === '') {
					uni.showToast({
						title:"描述不能为空",
						icon:"error"
					})
					return
				}else {
					let data = {
						applyRefundPrice: this.refundInfo.total, // 申请退款金额
						memberId: getUserData().id, // 用户ID
						memberName: getUserData().nickName, // 用户名称
						orderId: this.refundInfo.orderId, // 订单id
						outTradeNo: this.refundInfo.id, // 商户订单号
						payOrderNo: '', // 订单支付方式返回的交易号
						problemDesc: this.introduction, // 问题描述
						reason: this.introduction // 申请原因
					}
					refundPayment(data).then(res => {
						console.log(res)
						if(res.code === 200) {
							uni.showToast({
								title:"提交成功",
								icon:"success"
							})
							this.$refs.tuihuanBtn.close()
						}
					})
				}
			},
			// 控制顶部按钮切换
			changeType(index){
				this.typeIndex = index
				this.params.pageNum = 1
				this.params2.pageNum = 1
				// 判断为0时调用普通订单状态，为1时调用约拍订单状态
				if(index == 0){
					this.params.orderStatus = ""
					this.topStatus = this.orderStatus
					this.getOrderList()
				}else{
					this.params2.shootOrderStatus = ""
					this.topStatus = this.yuepaiStatus
					this.getYuepaiList()
				}
				// 先设置为0再循环，避免越加越多
				this.listBoxWidth = 0
				// 循环当前调用的订单状态组用来判断字数
				for(let i = 0 ; i < this.topStatus.length ; i++ ){
					const width = this.topStatus[i].name.split("")
					this.listBoxWidth = this.listBoxWidth + width.length
				}
				// 判断以上事件完成后将状态分类调整到全部
				this.orderStatusIndex = 0 
			},
			toShowList(index,type){
				// console.log(index,type,'状态')
				this.params.pageNum = 1
				this.params2.pageNum = 1
				this.orderStatusIndex = index
				if(this.typeIndex == 0 ){
					uni.setStorageSync("status", {type:this.orderStatus[index].title,change:'order'})
					this.params.orderStatus = type
					this.getOrderList()
				}else{
					uni.setStorageSync("status", {type:this.yuepaiStatus[index].title,change:'yuepai'})
					this.params2.shootOrderStatus = type
					this.getYuepaiList()
				}
			},
			// 调用接口，进来调一次全部，之后调用按选择来调用
			getOrderList(){
				this.orderInfo = []
				this.orderTotal = 0
				// 根据params数组来调用订单
				orderList(this.params).then(res => {
					for (let i = 0; i < res.rows.length; i++) {
						const orderList = {
							id: res.rows[i].outTradeNo, // 支付单号
							orderId: res.rows[i].orderId,
							total: res.rows[i].total, // 价格
							status: res.rows[i].orderStatus,
							image: res.rows[i].flakeUrl || this.imageUrl + 'noPic.jpg',
							address: res.rows[i].mealSnowName,
							jobId:res.rows[i].jobId,
							haveUpload:res.rows[i].haveUpload?res.rows[i].haveUpload : false,
							residueEditNumber:0,
							textInfo: [{
								leftText: '套餐类别',
								rightText: res.rows[i].setMealName
							}, {
								leftText: '订单编号',
								rightText: res.rows[i].orderId
							}, {
								leftText: '订单时间',
								rightText: res.rows[i].orderTime
							}]
						}
						this.orderInfo.push(orderList)
					}
					this.orderTotal = res.total
				})
			},
			getYuepaiList(){
				this.orderInfo = []
				this.orderTotal = 0
				getShootList(this.params2).then(res => {
					for (let i = 0; i < res.rows.length; i++) {
						let datas
						getShootTC().then(resa => {
							datas = resa.data.filter( j => j.id == res.rows[i].setMealShootId)
							const more = datas[0]
						
							let shootrList = {
								id: res.rows[i].outTradeNo, // 支付单号
								orderId: res.rows[i].id,
								total: res.rows[i].total, // 价格
								status: res.rows[i].shootOrderStatus,
								image: res.rows[i].flakeUrl || this.imageUrl + 'noPic.jpg',
								jobId:res.rows[i].jobId,
								residueEditNumber:res.rows[i].residueEditNumber,
								address: '约拍订单',
								haveUpload:res.rows[i].haveUpload,
								textInfo: [{
									leftText: '套餐名称',
									rightText: more.setMealName
								}, {
									leftText: '订单编号',
									rightText: res.rows[i].id
								}, {
									leftText: '订单时间',
									rightText: res.rows[i].reservationTime
								}]
							}
							this.orderInfo.push(shootrList)
						})
					}
					this.orderTotal = res.total
				})
			},
			// 下载成片
			downloadMeizi(jobId) {
				getEditingJob({
					Action: "GetEditingJob",
					userId: getUserData().id,
					jobId: jobId
				}).then(acc => {
					console.log(acc, '下载成片')
					// 发送下载请求
					  uni.downloadFile({
					    url: acc.editingJob.mediaDownloadUrl,
					    success(res) {
					      // 下载成功后的逻辑
					      if (res.statusCode === 200) {
					        // 下载成功，保存视频到本地
					        uni.saveVideoToPhotosAlbum({
					          filePath: res.tempFilePath,
					          success() {
					            // 保存成功的逻辑
					            uni.showToast({
					              title: '视频保存成功',
					              icon: 'success'
					            });
								this.$refs.DownLoads.close()
					          },
					          fail() {
					            // 保存失败的逻辑
					            uni.showToast({
					              title: '视频保存失败',
					              icon: 'none'
					            });
					          }
					        });
					      } else {
					        // 下载失败的逻辑
					        uni.showToast({
					          title: '视频下载失败',
					          icon: 'none'
					        });
					      }
					    },
					    fail() {
					      // 下载失败的逻辑
					      uni.showToast({
					        title: '视频下载失败',
					        icon: 'none'
					      });
					    },
					  });
				})
			},
			// 下拉获取数据
			onScrollToLowerOrder() {
				// 滚动触底事件处理逻辑
				console.log('滚动到底部了');
				if (this.params.pageNum === Math.ceil(this.orderTotal / 10)) {
					this.orderEnd = false
					console.log('当前数:', this.orderInfo.length, '总数:', this.orderTotal)
				} else {
					this.orderEnd = true
					console.log('上拉加载', this.params.pageNum,"总数:",this.orderTotal)
					if(this.typeIndex == 0 ){
						this.params.pageNum = ++this.params.pageNum
						// this.params2.shootOrderStatus = type
						this.getOrderList()
					}else{
						this.params2.pageNum = ++this.params2.pageNum
						// this.params2.shootOrderStatus = type
						this.getYuepaiList()
					}
					// this.getOrderList()
				}
			},
		}
	}
</script>

<style lang="less">
	.vue-ref {
		padding: 0 !important;
	}
	page{
		background: #f2f6f9;
	}
</style>

<style lang="less" scoped>
	.container {
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #000;
		overflow:hidden;
		height:100vh;

		.orderTypes{
			width: 690rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			height: 72rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			border-radius: 10rpx 10rpx 0 0;
			.typeBox{
				width: 50%;
				text-align: center;
				line-height: 72rpx;
				position: relative;
				font-size: 32rpx;
				color:#1D2129;
				.mores{
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					background-color: #4CA2EC;
					transform: skew(30deg, 0deg);
					opacity: 0;
				}
				&.active{
					background-color: #4CA2EC;
					color:#FFFFFF;
					.mores{
						opacity: 1;
					}
				}
				
				&:nth-child(1){
					.mores{
						right: -50rpx;
						top: 0;
						clip-path: inset(0% 0 0% 0 round 0 50% 0 0%);
					}
				}
				&:nth-child(2){
					margin-left: -30rpx;
					
					.mores{
						left: -50rpx;
						top: 0;
						clip-path: inset(0% 0 0% 0 round 0 0% 0 50%);
					}
				}
			}
		}
		.scrollIconsBox{
			display: flex;
			height: 80rpx;
			align-items: center;
			view{
				color: #1D2129;
				background: #ffffff;
				border-radius:20rpx;
				font-size: 28rpx;
				margin: 0 10rpx;
				padding: 5rpx 20rpx;
				&.active{
					color: #4CA2EC;
				}
			}
		}
		.srcoll-bottom {
			text-align: center;
			padding-bottom: 120rpx;
			font-size: 24rpx;
			color: #86909C;
		}
		.scroll-box{
			padding-bottom:45rpx;
		}
		.order {
			margin: 30rpx 0;
			margin-top: 0;
			background-color: #fff;
			padding: 10rpx 14rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.order-header {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;

				.left {
					display: flex;
					align-items: center;
					
					/deep/.uni-icons {
						font-size: 26rpx !important;
					}
				}
				
				.right{
					color: #86909C;
				}
				image {
					margin-left: 16rpx;
					width: 8rpx;
					height: 16rpx;
				}
			}

			.ordercent {
				.content {
					margin-top: 30rpx;
					display: flex;

					.left {
						margin-right: 40rpx;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
						}
					}

					.right {
						position: relative;
						width: 100%;

						.order-info {
							font-size: 28rpx;
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							&:nth-child(1){
								margin-top: 0;
							}
							.text-right {
								color: #86909C;
							}
						}

						.fukuan {
							position: absolute;
							right: 0;
							bottom: 0;
						}
					}

				}

				.bottom {
					margin-top: 15rpx;
					padding-top: 15rpx;
					display: flex;
					justify-content: flex-end;
					border-top: 1rpx solid #E7E7E7;

					.tags {
						margin-left: 5rpx;
						padding: 5rpx 20rpx;
						border-radius: 100rpx;
						font-size: 24rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						// color: #A7CCEF;
						border: 3rpx solid;
						text-align: center;
						line-height: 40rpx;
						transform: scale(0.9);
						&.blue{
							color: #4CA2EC;
							border-color: #4CA2EC;
						}
						&.org{
							color: #FF8D1A;
							border-color: #FF8D1A;
						}
						&.glay{
							color: #C5C5C5;
							border-color: #C5C5C5;
							border-width: 1rpx;
						}
						&.red{
							color: #F53F3F;
							border-color: #F53F3F;
						}
						&.green{
							color: #07c160;
							border-color: #07c160;
						}
					}
				}

			}
		}
	}
	
	
	.fodderNull {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
	
		.fodderNullTips {
			width: 590rpx;
			height: 432rpx;
			border-radius: 20rpx;
			background: #ffffff;
			box-shadow: 0px 10rpx 40rpx rgba(0, 0, 0, 0.05);
			
			.areaInput {
				width: 500rpx;
				margin: 0 auto;
			}
	
			b {
				font-size: 36rpx;
				color: #22242A;
				text-align: center;
				height: 162rpx;
				line-height: 162rpx;
				display: block;
			}
	
			p {
				color: #8D92A3;
				padding: 40rpx;
				padding-top: 0;
			}
	
			span {
				display: flex;
				align-items: flex-end;
				border-top: 2rpx #F1F3F8 solid;
	
				button {
					width: 50%;
					color: #6478D3;
					background: #ffffff;
					border-radius: 0;
	
					&:nth-child(1) {
						color: #8D92A3;
	
						&::after {
							border-radius: 0;
							border-right: 2rpx #F1F3F8 solid;
							margin: 15rpx 0;
						}
					}
	
					&::after {
						border: 0;
					}
				}
			}
		}
	}
	.toContants{
		width: 590rpx;
		height: 432rpx;
		border-radius: 20rpx;
		background: #ffffff;
		box-shadow: 0px 10rpx 40rpx  rgba(0, 0, 0, 0.05);
		overflow: hidden;
		
		b{
			font-size: 36rpx;
			color: #22242A;
			text-align: center;
			height: 162rpx;
			line-height: 162rpx;
			display: block;
		}
		p{
			color: #8D92A3;
			padding: 40rpx;
			height: 138rpx;
			padding-top: 0;
			font-size: 32rpx;
		}
		.areaInput {
			padding: 40rpx;
			height: 138rpx;
			padding-top: 0;
			width: 500rpx;
			margin: 0 auto;
			/deep/.uni-easyinput__content-textarea {
				min-height:0rpx;
				height: 138rpx;
			}
			
		}
		span{
			display: flex;
			align-items: flex-end;
			border-top: 2rpx #F1F3F8 solid;
			button{
				width: 50%;
				color: #8D92A3;
				background: #ffffff;
				border-radius: 0;
				
				&:nth-child(1){
					color: #6478D3;
					&::after{
						border-radius: 0;
						border-right:2rpx #F1F3F8 solid;
						margin: 15rpx 0;
					}
				}
				&::after{
					border: 0;
				}
			}
		}
	}
	.toCommons{
		width: 590rpx;
		padding-top: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		b{
			font-size: 36rpx;
			color: #22242A;
			text-align: center;
			height: 162rpx;
			line-height: 162rpx;
			display: block;
		}
		.commonLists{
			view{
				padding:0 40rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				// justify-content: center;
				font-size: 28rpx;
				
				&.texts{
					padding:0 20rpx;
					margin-top: 20rpx;
					height: 350rpx;
					flex-direction: column;
					align-items: flex-start;
					position: relative;
					
					textarea{
						box-shadow: 0 0 4rpx #dddddd;
						margin-bottom: 30rpx;
						width: 95%;
						padding: 15rpx;
						height: 300rpx;
						background: #eeeeee;
						border: 3rpx solid #6478D3;
						border-radius:20rpx;
					}
					.maxlengths{
						position: absolute;
						right: 5rpx;
						bottom: 15rpx;
						color: #cccccc;
						font-size: 28rpx;
					}
				}
			}
		}
		.bottomCommons{
			display: flex;
			align-items: flex-end;
			border-top: 2rpx #F1F3F8 solid;
			border-radius:0 0 20rpx 20rpx;
			overflow: hidden;
			button{
				width: 100%;
				color: #6478D3;
				background: #ffffff;
				border-radius: 0;
				
				&::after{
					border: 0;
				}
			}
		}
	}
	.skiingVideo-list {
		width: 100VW;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #ffffff;
		position: relative;

		 .title {
			margin-top: 8VH;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: relative;
			width:100VW;
			// display:flex;
			font-size:28rpx;
		/deep/.uni-icons {
			position: absolute;
			left: 20rpx;
			top: 0;
		}
	}

	.skiingVideo-button {
		position: absolute;
		top: 40%;
		right: 30rpx;
		bottom: 100rpx;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: flex-start;
		padding: 20rpx 0;
		align-items: center;
		font-size: 32rpx;
		color: #929292;
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果

		image {
			width: 50rpx;
		}
		// view {
		// 	text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
		// 	font-weight: 600;
		// }
	}
	.shuiyin{
		position: absolute;
		width: 300rpx;
		height: 10rpx;
		left:30rpx;
		top:180rpx;
		color: #ffffff;
		font-size: 45rpx;
		opacity: 0.6;
		transform: rotate(-30deg);
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
	}
	.yuepai-button {
	// margin-top: 30rpx;
		top: 56%;
		position: absolute;
		right: 30rpx;
		bottom: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: flex-start;
		padding: 30rpx 0;
		align-items: center;
		font-size: 32rpx;
		color: #929292;
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果

		view {
			text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
			font-weight: 600;
		}

		.uni-icons {
			font-size: 50rpx !important;
			color: #929292 !important;

		}

		&.active {
			color: #4CA2EC;

			.uni-icons {
				font-size: 50rpx !important;
				color: #4CA2EC !important;
			}
		}
	}

	.videoBox {
		video {
			width: 100%;
		}
	}
}
// 这个是没有数据的公共样式，直接取用标签就行
	.nodatas{
		width: 80%;
		height: 50%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-direction: column;
		
		image{
			width: 350rpx;
			height: 350rpx;
		}
		.text{
			display: flex;
			align-items: center;
			text-align: center;
			color: #cccccc;
			font-size: 28rpx;
			i{
				font-style: normal;
				color: #4CA2EC;
			}
		}
	}
</style>